<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>预算管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	html{width: 98.5% !important;}
		body{
        	background:transparent;
   			 }
   		.form-control{width:auto;}
   		.control{width:100% !important}
   		.strange{width:auto}
   		.th-inner {background-color:#f4f4f4}
   		section{
    		margin:0px 20px;
    	}
    </style>
</head>
<body>
	<section class="content-header">
		<h4>流水账单</h4>
	</section> 
	<section class="content table-content">
		<form class="form-horizontal" >
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<label for="item" class="control-label col-sm-4">项目：</label>
						<input type="text" id="item" class="form-control col-sm-8"></input>
					</div>
				</div>
				<div class="col-md-3">
					<div class="form-group">
						<label class="col-sm-4 control-label">成员：</label>
						<div class="col-sm-8">
							<select class="form-control col-xs-12" id="member" >
				          		<option>           </option>
				          		<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				       		</select>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label class="col-sm-4 control-label">账期：</label>
						<div class="col-sm-4 date form_date " >
							<input type="text" class="form-control control" id="date" placeholder="起始日期" />
						</div>
						<div class="col-sm-4 " >
							<input type="text" class="form-control control" id="dateEnd" placeholder="结束日期" />
						</div>
					</div>
				</div>
				<div >
					<button type="button" id="editBtn" class="btn btn-primary" onclick="query()"><span class="glyphicon glyphicon-search"></span>查询</button>
				</div>
			</div>
			
		</form>
		<table id="dataGrid">
		</table>
	</section>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
	//初始化
	$(function(){
		initDataGrid();
	});
	function initDataGrid(){
		//创建bootstraptable
		$("#dataGrid").bootstrapTable({
			method:"get",
			cache: false,         
			//缺失无法执行queryParams,传递Page参数
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			url : "/gradesign/bill/query",
			queryParams : queryParam,
			pagination : true,//显示分页条：页码，条数等
			striped : true,//隔行变色
			pageNumber : 1,//首页页码
			pageSize : 10,//分页，页面数据条数
			pageList: [10,20,30,40],
			uniqueId : "id",//Indicate an unique identifier for each row
			sidePagination : "server",//在服务器端分页
			height:dataGrid.height,
			toolbar : "#toolbar",//工具栏
			columns : [{
				title : "Id",
				field : "id",
				visible : false
			},{
				title : "项目",
				field : "item"
			},{
				title : "日期",
				field : "date"
			},{
				title : "金额",
				field : "money"
			},{
				title : "成员",
				field : "member"
			},{
				title : "账单类型",
				field : "type"
			},{
				title : "账单类型详细",
				field : "typeDetail"
			},{
				title : "备注",
				field : "tip"
			}],
		});
	}
	
	function queryParam(params){
		var param = {
				limit : this.limit,//页面大小
				offset : this.offset,//页码
				pageNumber : this.pageNumber,
				pageSize : this.pageSize,
				sortName : this.sortName,
				sortOrder : this.sortOtder
		};
		return param;
	};
	function queryDataGrid(){
		var params = {};
		params.item = $("#item").val();
		//创建bootstraptable
		$("#dataGrid").bootstrapTable('destroy');
		$("#dataGrid").bootstrapTable({
			method:"get",
			cache: false,         
			//缺失无法执行queryParams,传递Page参数
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			url : "/gradesign/bill/conQuery",
			queryParams : conditionQuery,
			pagination : true,//显示分页条：页码，条数等
			striped : true,//隔行变色
			pageNumber : 1,//首页页码
			pageSize : 10,//分页，页面数据条数
			pageList: [10, 20, 30, 40],
			uniqueId : "id",//Indicate an unique identifier for each row
			sidePagination : "server",//在服务器端分页
			height:dataGrid.height,
			sortName : "created_at",
			toolbar : "#toolbar",//工具栏
			columns : [{
				title : "Id",
				field : "id",
				visible : false
			},{
				title : "收入项目",
				field : "item"
			},{
				title : "收入日期",
				field : "date"
			},{
				title : "收入金额",
				field : "money"
			},{
				title : "收入人",
				field : "member"
			},{
				title : "收入类型",
				field : "type"
			},{
				title : "收入类型详细",
				field : "typeDetail"
			},{
				title : "备注",
				field : "tip"
			}],
		});
	}
	function query(){
		var params = {};
		
		queryDataGrid();
	}
	function conditionQuery(params){
		if($("#member").val()=='---请选择成员---'){
			$("#member").val('');
		}
		var param = {
				limit : this.limit,//页面大小
				offset : this.offset,//页码
				pageNumber : this.pageNumber,
				pageSize : this.pageSize,
				sortName : this.sortName,
				sortOrder : this.sortOtder,
				item : $("#item").val(),
				member : $("#member").val(),
				date : $("#date").val(),
				dateEnd : $("#dateEnd").val()
		};
		return param;
	}
	$('#date').datetimepicker({
		format: "yyyy-mm-dd",
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    minView: 2,
	    forceParse: 0,
	    todayHighlight: true
	});
	$('#dateEnd').datetimepicker({
		format: "yyyy-mm-dd",
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    minView: 2,
	    forceParse: 0,
	    todayHighlight: true
	});
</script>
</html>